import { Form, Input, InputNumber, Modal, Select, TreeSelect } from 'antd';
import { useEffect } from 'react';
import { useDeptModel } from '@/models/dept';
import { useStatusDictsModel } from '@/models/dicts';
import { getMenuDetail } from '@/services/menu';

type Props = {
  id: string;
  parentId: string;
  onClose?: (refresh: boolean) => void;
};
const App = (props: Props) => {
  const { id, parentId, onClose = () => {} } = props;
  const [form] = Form.useForm();
  const title = id ? '编辑' : '新增';

  const { deptTree } = useDeptModel();
  const { statusOptions } = useStatusDictsModel();
  const getData = async () => {
    if (parentId === undefined) {
      return;
    }
    const { data } = await getMenuDetail(parentId);
    console.log(parentId, data);
    form.setFieldsValue(data);
  };
  useEffect(() => {
    getData();
  }, []);
  const ok = async () => {
    await form.validateFields();
    const values = form.getFieldsValue();
    console.log(values);
  };
  console.log(ok);
  return (
    <Modal
      width={600}
      open={true}
      title={`${title}菜单`}
      onCancel={() => onClose(false)}
    >
      <Form form={form} labelCol={{ span: 6 }}>
        <Form.Item
          label="上级部门"
          name="parentId"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <TreeSelect placeholder="请选择上级部门" treeData={deptTree} />
        </Form.Item>
        <Form.Item
          label="部门名称"
          name="deptName"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input placeholder="请输入部门名称" />
        </Form.Item>
        <Form.Item
          label="显示排序"
          name="orderNum"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <InputNumber
            placeholder="请输入显示排序"
            style={{ width: '100%' }}
            min={0}
          />
        </Form.Item>
        <Form.Item label="负责人" name="leader">
          <Input placeholder="请输入负责人" />
        </Form.Item>
        <Form.Item label="联系电话" name="phone">
          <Input placeholder="请输入联系电话" />
        </Form.Item>
        <Form.Item label="邮箱" name="email">
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item label="部门状态" name="status">
          <Select options={statusOptions} placeholder="请选择状态" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default App;
